<template>
	<yd-layout id='storeCar' class=''>
		<div class="content">
			<yd-checklist color='#DCBBC9'  class='check_list_f' v-model="checklist" ref="checklistDemo" :callback="change" :label="false">
				<div class="list_f" v-for="item,index in goodsList" :key='index'>
					<yd-checklist-item :val="item.id">
						<div class="list">
							<img class="list_img" :src="item.title_img" alt="" />
							<div class="list_right">
								<div class="list_title c_text_ellipsis_2">{{item.goods_name}}</div>
								<div class="list_bottom">
									<div class="list_money">￥{{item.price}}</div>
									<div class="list_bottom_right">
										<img @click="jian(item,index,'goodsList')" class="list_bottom_right_img" src="../../assets/goodsDetail_3.png" alt="" />
										<input class="list_input" pattern="\d*" v-model.trim="item.number" maxlength="4" @blur="blurNumInput(item,index,'goodsList')" @input='changeNumInput(item,index,"goodsList")' oninput="if(value.length>4)value=value.slice(0,4)" />
										<img @click="add(item,index,'goodsList')" class="list_bottom_right_img" src="../../assets/goodsDetail_2.png" alt="" />
									</div>
								</div>
							</div>
						</div>
					</yd-checklist-item>
				</div>
			</yd-checklist>
		</div>
		<div class="no_goods" v-if="checklist.length==0">暂未加入任何商品~~</div>
		<div slot='bottom' class="bottom">
			<yd-checkbox color='#DCBBC9'  class='bottoom_left' v-model="isCheckAll" shape="circle" :change="checkAll">全选</yd-checkbox>
			<div class="bottom_right">
				<div class="bottom_money c_text_ellipsis_1">
					<div class="bottom_money_c"><label>合计：</label><span>￥{{allMoney}}</span></div>
					<div>免运费</div>
				</div>
				<!--moneyFlg-->
				<div class="bottom_btn" v-if="allMoney<=0" style="background: #cccccc;" @click="goGoodsOrder(false)">结算</div>
				<div class="bottom_btn" v-else @click="goGoodsOrder(true)">结算</div>
			</div>
		</div>
	</yd-layout>
</template>

<script>
	import { CheckList, CheckListItem } from 'vue-ydui/dist/lib.rem/checklist';
	import { CheckBox, CheckBoxGroup } from 'vue-ydui/dist/lib.rem/checkbox';
	import mixinInputReg from '../../mixin/mixinInputReg.js';
	export default {
		mixins: [mixinInputReg],
		components: {
			[CheckList.name]: CheckList,
			[CheckListItem.name]: CheckListItem,
			[CheckBox.name]: CheckBox,
			[CheckBoxGroup.name]: CheckBoxGroup,
		},
		data() {
			return {
				checklist: [],
				isCheckAll: false,
				inputNum: 1,
				moneyFlg: true,
				goodsList: [],
				allMoney: '0.0',
			}
		},
		created() {},
		watch: {
			checklist: {
				handler: function(val, oldVal) {
					this.getAllMoney();
				},
				deep: true
			},
		},
		computed: {

		},
		mounted() {
			document.title = '购物车'
			this.getCarList();
		},
		methods: {
			//得到总金额
			getAllMoney() {
				let obj = {
					money: 0
				}
				this.checklist.forEach((item) => {
					for(let a = 0; a < this.goodsList.length; a++) {
						if(item == this.goodsList[a].id) {
							obj.money += this.goodsList[a].price * this.goodsList[a].number
						}
					}
				})
				this.allMoney = this.$root.setMoneyZero(obj, 'money')
			},
			//得到购物车列表
			getCarList() {
				this.$root.ajax({
					name: 'mall/cart/lst',
					params: {

					},
				}).then((d) => {
					for(let m = 0; m < d.data.cart_list.length; m++) {
						d.data.cart_list[m].oldNumber = d.data.cart_list[m].number
					}
					this.goodsList = d.data.cart_list;
					this.$nextTick(() => {
						this.isCheckAll = !this.isCheckAll;
						this.$refs.checklistDemo.$emit('ydui.checklist.checkall', this.isCheckAll);
					})

				})
			},
			//去订单页面
			goGoodsOrder(flg) {
				console.log(this.checklist.toString().replace(/,/g, '|'))
				if(this.checklist.length > 0) {
					this.$root.ajax({
						name: 'mall/order/create',
						params: {
							ids: this.checklist.toString().replace(/,/g, '|')
						},
					}).then((d) => {
						this.$router.push({
							name: 'storeOrder',
							query: {
								id: d.data.order.id
							}
						})
					})
				} else {
					this.$dialog.toast({
						mes: '请选择商品！',
						timeout: 1500
					});
				}

			},
			change(value, isCheckAll) {
				this.isCheckAll = isCheckAll;
			},
			checkAll() {
				this.isCheckAll = !this.isCheckAll;
				this.$refs.checklistDemo.$emit('ydui.checklist.checkall', this.isCheckAll);
			},
			add(item, index, arrStr) {
				item.number = parseFloat(item.number)
				if(item.number >= 9999) {
					this.$dialog.toast({
						mes: '数量不能大于9999',
						timeout: 1500,
					});
					item.number = 9999
				} else {

					this.$root.ajax({
						name: 'mall/cart/add',
						params: {
							number: (item.number + 1),
							goods_id: item.goods_id
						},
					}).then((d) => {
						if(d.code == 0) {
							item.number = d.data.number
							item.oldNumber = d.data.number
							this.getAllMoney();
						}
					})

				}
			},
			jian(item, index, arrStr) {
				if(item.number > 1) {
					this.$root.ajax({
						name: 'mall/cart/add',
						params: {
							number: (item.number - 1),
							goods_id: item.goods_id
						},
					}).then((d) => {
						if(d.code == 0) {
							item.number = d.data.number
							item.oldNumber = d.data.number
							this.getAllMoney();
						}
					})
				} else {
					this.$dialog.toast({
						mes: '数量至少为1',
						timeout: 1500,
					});
				}

			},
		}
	}
</script>

<style lang="scss">
	@import './storeCar.scss';
</style>